<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ page import="com.ai.core.util.Configure"%> 
<%@ page import="com.ai.core.constant.GlobalConstant"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-control" content="max-age=1700" />

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<meta name="MobileOptimized" content="320" />
<meta name="format-detection" content="telephone=no" />


<script type="text/javascript" src="${ctx}/js/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript" src="${ctx}/js/common.js"></script> 
<link href="${ctx}/css/wxflow.css" rel="stylesheet" type="text/css" />
<link href="${ctx}/css/fonts/font.css" rel="stylesheet" type="text/css" />

<title>流量e超市</title>
<script>
wx.config({
    debug: false,
    appId: '<%=Configure.getAppId()%>',
    timestamp: '${JsSign.timestamp}',
    nonceStr: '${JsSign.nonce}',
    signature: '${JsSign.signature}',
    jsApiList: [
        'checkJsApi',
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo',
        'hideMenuItems',
        'showMenuItems',
        'hideAllNonBaseMenuItem',
        'showAllNonBaseMenuItem',  
        'chooseImage',
        'previewImage',
        'uploadImage',
        'downloadImage',
        'getNetworkType', 
        'hideOptionMenu',
        'showOptionMenu',
        'closeWindow',   
      ]
});
var cmccProducts = ${cmccProducts};
var cuccProducts = ${cuccProducts};
var ctccProducts = ${ctccProducts};
var selectedProductId;
$(function() {
//wx.ready(function () {
     
    $('#mobileNumber').bind('input propertychange', function() {
        var mobileNumber = $('#mobileNumber').val();
        passValidate=false; 
        if(mobileNumber.length==11){ 
        	showProductPrice(mobileNumber);
        }else{
            $('#mobileNumberMsg').text(''); 
            $('#productsPrice').html(''); 
            $('#price').hide(); 
        }
       
    }); 
    
    $('#payBtn').click(function() { 
        var promCode = $('#promotionCode').val(); 
        var mobileNumber = $('#mobileNumber').val();
        if(mobileNumber==""||mobileNumber=="输入手机号码"){
        	alert("输入手机号码");
        }
        $("#bg").show();
        $("#show").show();
        $.post(
                '${ctx}/getBrandWCPayReqParams',
                {mobileNumber:mobileNumber,productId:selectedProductId,promotionCode:promCode} ,  
                function(data){  
                    $("#show").hide();
                    WeixinJSBridge.invoke('getBrandWCPayRequest',data,
                       function(res){
                    	  //showJson(res); 
                    	  $("#bg").hide();
                          if(res.err_msg == "get_brand_wcpay_request:ok" ) {
                        	  window.location.href="${ctx}/order";
                          }
                       }
                    ); 
                     
     
                }
            );  
    });
    $('#promotionCode').bind('input propertychange', function() {
        var promCode = $(this).val(); 
        if(promCode.length==4){
            $.post('${ctx}/chkPromCode',
                {promotionCode:promCode}, 
                function(data){ 
                    
                    if(!data){
                        $('#promotionCode').val('').attr('placeholder','该优惠码无效');
                    }else if(!isNull(selectedProductId)){
                        $.post(
                            '${ctx}/getProductPrice', 
                            {productId:selectedProductId,promotionCode:promCode} , 
                            function(data){   
                            	
                            	//showJson(data);
                                var html = '<p class="price_new">实付款:'+data.ftotal+'</p>';
                                if(data.discount > 0 ){
                                    html += '<p class="price_old">原价：'+data.ftariff+'</p>';
                                    html += '<p class="price_off">折扣：'+data.fdiscount+'</p>';
                                }
                                $('#price').html(html).show(); 
                            }
                        );
                    }
                } 
            );  
        }
    });
    
    $(".phone-his").click(function(){
    	 if($(this).text()=="历史记录"){
    		 $(this).text("隐藏历史");
    	 }else{
    		 $(this).text("历史记录");
    	 }
    	 $(".float-his ").toggle();
    });
    
    $(".float-his li").click(function(){
    	var mobileNumber=$(this).text();
    	$("#mobileNumber").val(mobileNumber).css({"color":"#000","font-weight":"bold","font-size":"22px"});
    	$(".float-his ").hide();
    	$(".phone-his").text("历史记录");
    	showProductPrice(mobileNumber);
    });
    
    $("#show").css("top",$(window).height()/2-10);
    
})
function showProducts(products){
    var html='';
    $.each(products,function(index,obj){
        html += '<a class="product" data-value="'+obj.productTraffic+'" data-product="'+obj.productId+'" data-tariff="'+obj.dbTariff+'" onclick="selectProduct(\''+obj.productId+'\')">'+ obj.productName +'<p>￥'+obj.dbTariff+'</p></a>';
    });
    html+='<div class="clear-float"></div>';
    $('#productsPrice').html(html);
}
function selectProduct(productId){
    $('.product').each(function(){
        var tariff = $(this).data('tariff');
        var tempProductId = $(this).data('product');
        var productTraffic = $(this).data();
        if( productId == tempProductId){
            selectedProductId = productId;
            $(this).addClass('productSelected');
            var promCode = $('#promotionCode').val();
            $.post(
                    '${ctx}/getProductPrice', 
                    {productId:selectedProductId,promotionCode:promCode} , 
                    function(data){   
                    	//showJson(data);
                        var html = '<p class="price_new">实付款:'+data.ftotal+'</p>';
                        if(data.discount > 0 ){
                            html += '<p class="price_old">原价：'+data.ftariff+'</p>';
                            html += '<p class="price_off">折扣：'+data.fdiscount+'</p>';
                        }
                        $('#price').html(html).show(); 
                    }
                );  
             
        }else{
            $(this).removeClass('productSelected');
        }
    });
}

function showProductPrice(mobileNumber){
	$.post(
            '${ctx}/getMobileMap', 
            {mobileNumber:mobileNumber} , 
            function(data){ 
                 $('#mobileNumberMsg').addClass('true-num').text(data.areaName);
                 if(data.mobileType==1){
                     showProducts(cmccProducts); 
                 } 
                 if(data.mobileType==2){
                     showProducts(cuccProducts); 
                 } 
                 if(data.mobileType==3){
                     showProducts(ctccProducts); 
                 } 
            }
        );
}
</script>
</head>
<body>
    <div class="wrap">
        <p class="describe">支持中国移动、中国联通、中国电信手机流量充值
        <p>
        <div class="phone">
            <p id="mobileNumberMsg" class="true-num"></p> 
            <div class="phone-num">
                <input  id="mobileNumber" type="tel"  value="输入手机号码"
                    class="input"
                    onFocus="if(this.value=='输入手机号码'){this.value='';this.style.color='#000';this.style.fontWeight='bold';this.style.fontSize='22px'}"
                    onBlur="if(this.value==''){this.value='输入手机号码';this.style.color='#999';this.style.fontWeight='normal';this.style.fontSize='16px'}"  
                    autocomplete="off"/>
                <div class="float-his">   
                	<ul>
                	   <c:forEach items="${historyList}" var="history">
                	   		<li>${history.phone}</li>
                	   </c:forEach>
                    </ul>
            	</div>
            </div>   
            <div class="phone-his">历史记录</div>
        </div> 
        
         <div class="sale">
            <input name="promotionCode" maxlength="4" id="promotionCode" type="text" placeholder="输入折扣码" class="input" autocomplete="off" value="${code}" />
        </div>
        <p class="sale-describe">
                           输入4位数折扣码，可享受相应折扣优惠
        <p>
        <div class="price_p" id="productsPrice">
             
        </div> 
        <div class="money" id="price"> 
        </div>
        <a href="javascript:" class="buy" id="payBtn">立即支付</a>
        <div class="instruction">
            <p>上海移动充值流量提醒</p>
            <p>使用范围：支持全国漫游</p>
            <p>使用有效期：当月有效</p>
            <p>充值次数限制：不限次数，仅限4G用户充值</p>
        </div>
    </div>
    <!-- loading 遮幕层 -->
    <div id="bg"></div>
    <div id="show">
		<div class="wrap-loader">
			  <div class="loader">
			    <div class="loader-inner ball-beat">
			      <div></div>
			      <div></div>
			      <div></div>
			    </div>
			  </div>
		</div>
	</div>
</body>
</html>




